<template>
  <view class="container">
    <my-navbar-top></my-navbar-top>
    <view class="invoice-page">
      <view class="order-header"> 电子发票 </view>
      <view class="info">
        <view class="info-item">
          <view class="title">订单金额：</view>
          <view>￥{{ invoiceInfo.price }}</view>
        </view>
        <view class="info-item">
          <view class="title">可开票金额：</view>
          <view>￥{{ invoiceInfo.price }}</view>
        </view>
        <view class="info-item">
          <view class="title">订单编号：</view>
          <view>{{ invoiceInfo.order_no }}</view>
        </view>
      </view>
      <view class="invoice-form">
        <view class="radio-box">
          <view
            class="radio-box-item"
            style="width: 210rpx"
            @click="invoiceForm.is_company = 1"
          >
            <image
              :src="
                invoiceForm.is_company == 1
                  ? '/static/images/invoice-s.png'
                  : '/static/images/invoice.png'
              "
              mode="scaleToFill"
            />
            <view>企业</view>
          </view>
          <view class="radio-box-item" @click="invoiceForm.is_company = 0">
            <image
              :src="
                invoiceForm.is_company == 1
                  ? '/static/images/invoice.png'
                  : '/static/images/invoice-s.png'
              "
              mode="scaleToFill"
            />
            <view>个人及非营利企事业单位</view>
          </view>
        </view>
        <view class="radio-box">
          <view
            class="radio-box-item"
            style="width: 210rpx"
            @click="invoiceForm.is_general = 1"
          >
            <image
              :src="
                invoiceForm.is_general == 1
                  ? '/static/images/invoice-s.png'
                  : '/static/images/invoice.png'
              "
              mode="scaleToFill"
            />
            <view>普票</view>
          </view>
          <view class="radio-box-item" @click="invoiceForm.is_general = 0">
            <image
              :src="
                invoiceForm.is_general == 1
                  ? '/static/images/invoice.png'
                  : '/static/images/invoice-s.png'
              "
              mode="scaleToFill"
            />
            <view>专票</view>
          </view>
        </view>
        <view class="invoice-form-item ef-form">
          <view class="ef-form__item-body">
            <uni-easyinput
              v-model="invoiceForm.look_up"
              primaryColor="#c9a063"
              :inputBorder="false"
              placeholder="请输入抬头（必填）"
            />
          </view>
          <!-- 纳税人识别号 -->
          <view class="ef-form__item-body">
            <uni-easyinput
              v-model="invoiceForm.identification"
              primaryColor="#c9a063"
              :inputBorder="false"
              placeholder="请输入纳税人识别号（必填）"
            />
          </view>
          <!-- 公司地址 -->
          <view class="ef-form__item-body">
            <uni-easyinput
              v-model="invoiceForm.company_address"
              primaryColor="#c9a063"
              :inputBorder="false"
              placeholder="请输入公司地址"
            />
          </view>
          <!-- 公司电话 -->
          <view class="ef-form__item-body">
            <uni-easyinput
              v-model="invoiceForm.company_telephone"
              primaryColor="#c9a063"
              :inputBorder="false"
              placeholder="请输入公司电话号码"
            />
          </view>
          <!-- 银行名称 -->
          <view class="ef-form__item-body">
            <uni-easyinput
              v-model="invoiceForm.bank_name"
              primaryColor="#c9a063"
              :inputBorder="false"
              placeholder="请输入公司开户银行"
            />
          </view>
          <!-- 银行账号 -->
          <view class="ef-form__item-body">
            <uni-easyinput
              v-model="invoiceForm.bank_number"
              primaryColor="#c9a063"
              :inputBorder="false"
              placeholder="请输入公司银行账号"
            />
          </view>
          <view class="invoice-form-title" style="margin-top: 20rpx">
            请填写联系方式，向您同步电子发票信息。
          </view>
          <!-- 邮箱 -->
          <view class="ef-form__item-body">
            <uni-easyinput
              v-model="invoiceForm.email"
              primaryColor="#c9a063"
              :inputBorder="false"
              placeholder="请输入您的邮箱（必填）"
            />
          </view>

          <view class="invoice-form-title">
            注：电子发票开具成功后会默认发送至您填写的电子邮箱中。
          </view>

          <view class="invoice-footer">
            <view class="invoice-button" @click="invoiceAdd"> 确认 </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Invoice',
  data() {
    return {
      invoiceInfo: {},
      invoiceForm: {
        order_id: '', // 订单id
        email: '', // 邮箱
        is_company: 1, // 是否为公司 0: 否 1: 是
        is_general: 1, // 是否为普通发票 0: 否 1: 是
        look_up: '', // 抬头
        identification: '', // 身份证号/营业执照号
        company_address: '', // 公司地址
        company_telephone: '', // 公司电话
        bank_name: '', // 银行名称
        bank_number: '', // 银行账号
      },
    }
  },
  onLoad(options) {
    console.log(options)
    if (options.order_id) {
      this.getInvoiceInfo(options.order_id)
    }
  },
  methods: {
    // 获取订单信息
    getInvoiceInfo(order_id) {
      this.$api.invoiceInfo({ order_id }).then((res) => {
        if (res.code == 0) {
          this.invoiceInfo = res.data
          this.invoiceForm.order_id = res.data.id || ''
        }
      })
    },
    // 申请开票
    invoiceAdd() {
      // 校验必填项
      if (!this.invoiceForm.look_up) {
        this.$util.showText('请输入抬头')
        return
      }
      if (!this.invoiceForm.identification) {
        this.$util.showText('请输入纳税人识别号')
        return
      }
      if (!this.invoiceForm.email) {
        this.$util.showText('请输入邮箱')
        return
      }
      this.$api.invoiceAdd(this.invoiceForm).then((res) => {
        console.log(res)
        if (res.code == 0) {
          uni.showToast({
            title: '提交成功',
            icon: 'success',
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 500)
        } else {
          this.$util.showText(res.msg)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
